<template>
  <div class="layer" v-if="show" @touchmove.stop="preventD">
    <div class="dialog">
      <div class="dialog-container" :style="bg">
        <div class="dialog-btn">
          <div class="btn btn1" @click="onBtn1Click"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'

export default {
  components: {
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    type: String
  },
  data () {
    return {
      icons: {
        alert: `${sourceDomain}/alert/alert13.png?v=1.3`,
      },
    }
  },
  computed: {
    bg () {
      return `background-image: url(${this.icons.alert});`
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$emit('onShow')
      } else {
        this.$emit('onHide')
      }
    },
  },
  methods: {
    preventD () {},
    hideDialog () {
      this.$emit('update:show', false)
    },
    onClick () {
      this.$emit('onClick')
      this.hideDialog()
    },
    onBtn1Click () {
      wx.navigateTo({
        url: '/pages/friend/main'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.layer {
  z-index: 200;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .5);
  .dialog {
    width: 100%;
    text-align: center;
    position: relative;
    &-container {
      width: 713rpx;
      height: 403rpx;
      margin: 0 auto;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .dialog-btn {
      position: absolute;
      .btn {
        position: absolute;
        width: 183rpx;
        height: 77rpx;
      }
      .btn1 {
        top: 255rpx;
        left: 264rpx;
      }
    }
  }
}
</style>
